<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery-slim.min.js"></script>
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
	<title>index</title>
</head>
<body>

<header>
	<iframe class="my_header" src="header.html" frameborder="0" scrolling="no"></iframe>
</header>

<div class="container">
	<!--轮播图-->
	<div id="lunbo" class="carousel" data-ride="carousel">
		<!--图片部分-->
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img class="w-100" src="../../img/banner1.png" alt="">
			</div>
			<div class="carousel-item">
				<img class="w-100" src="../../img/banner2.png" alt="">
			</div>
			<div class="carousel-item">
				<img class="w-100" src="../../img/banner3.png" alt="">
			</div>
			<div class="carousel-item">
				<img class="w-100" src="../../img/banner4.png" alt="">
			</div>
		</div>
		<!--左右按钮-->
		<a href="#lunbo" data-slide="prev" class="carousel-control-prev">
			<span class="carousel-control-prev-icon"></span>
		</a>
		<a href="#lunbo" data-slide="next" class="carousel-control-next">
			<span class="carousel-control-next-icon"></span>
		</a>
		<!--指示器-->
		<ul class="carousel-indicators">
			<li data-slide-to="0" data-target="#lunbo" class="active"></li>
			<li data-slide-to="1" data-target="#lunbo"></li>
			<li data-slide-to="2" data-target="#lunbo"></li>
			<li data-slide-to="3" data-target="#lunbo"></li>
		</ul>
	</div>
	<!--1L标题-->
	<div class="border-bottom mt-3 pb-1">
		<img class="mw-100"  src="../../img/computer_icon.png" alt="">
		<span class="h5">首页推荐 /1F</span>
	</div>
	<!--1L布局-->
	<div class="row no-gutters mt-2">
		<div class="col-lg-7 col-sm-12 ">
			<div class="my_height1 mr-lg-1 mb-1">
				<div class="card border-0 bg-transparent w-50 pt-5 pl-5">
					<h3 class="mb-0">Apple MacBook Air系列</h3>
					<h6 class="font-weight-normal font_small text-muted">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</h6>
					<span class="text-primary">￥6988.00</span>
					<a class="btn btn-primary w-50" href="">查看详情</a>
				</div>
				<img class="float-right img-position1" src="../../img/study_computer_img1.png" alt="">
			</div>
		</div>
		<div class="col-lg-5 col-sm-12 ">
			<div class="my_height1 mb-1">
				<div class="card border-0 bg-transparent w-50 pt-5 pl-5">
					<h3 class="mb-0">小米Air 金属超轻薄</h3>
					<h6 class="font-weight-normal font_small text-muted">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</h6>
					<span class="text-primary">￥3488.00</span>
					<a class="btn btn-primary w-75" href="">查看详情</a>
				</div>
				<img class="float-right img-position2" src="../../img/study_computer_img2.png" alt="">
			</div>
		</div>
		
		<div class="col-lg-5 col-sm-12 ">
			<div class="my_height2 mr-lg-1 mb-sm-1 mb-lg-0">
				<div class="card border-0 bg-transparent w-50 pt-5 pl-5">
					<h5 class="mb-0">联想E480C 轻薄系列</h5>
					<span class="text-primary">￥5399.00</span>
					<a class="btn btn-primary w-75" href="">查看详情</a>
				</div>
				<img class="float-right img-position2" src="../../img/study_computer_img3.png" alt="">
			</div>
		</div>
		<div class="col-lg-7 col-sm-12 ">
			<div class="row no-gutters">
				<div class="col  ">
					<div class="my_height2 mr-1">
						<div class="card border-0 bg-transparent align-items-center">
							<img class="w-75" src="../../img/study_computer_img4.png">
							<p class="font_small text-dark mb-1">华硕RX310 金属超极本</p>
							<p class="text-primary mb-1">￥4966.00</p>
							<a class="btn btn-primary btn-sm w-50" href="">查看详情</a>
						</div>
					</div>
				</div>
				<div class="col  ">
					<div class="my_height2 mr-1">
						<div class="card border-0 bg-transparent align-items-center">
							<img img class="w-75" src="../../img/study_computer_img4.png">
							<p class="font_small text-dark mb-1">华硕RX310 金属超极本</p>
							<p class="text-primary mb-1">￥4966.00</p>
							<a class="btn btn-primary btn-sm w-50" href="">查看详情</a>
						</div>
					</div>
				</div>
				<div class="col ">
					<div class="my_height2">
						<div class="card border-0 bg-transparent align-items-center">
							<img img class="w-75" src="../../img/study_computer_img4.png">
							<p class="font_small text-dark mb-1">华硕RX310 金属超极本</p>
							<p class="text-primary mb-1">￥4966.00</p>
							<a class="btn btn-primary btn-sm w-50" href="">查看详情</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<footer>
	<iframe class="my_footer" src="footer.html" frameborder="0" scrolling="no"></iframe>
</footer>

</body>
</html>